<template>
  <div style="height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #7f85ff">
    <div style="display: flex; background-color: white; width: 60%;height: 600px">
      <div style="flex: 1">
        <img src="@/assets/tsg.jpg" alt="" style="width: 100%;height: 600px">
      </div>
      <div style="flex: 1; display: flex;align-items: center; justify-content: center">
        <el-form :model="loginForm" ref="loginForm" :rules="rules" style="width: 80%"> <!-- 新增 ref 和 rules -->
          <img height="80" src="@/assets/tsglogo.png" alt="logo" class="sidebar-logo" style="width: 100%;margin-bottom: 40px"/>
          <div style="font-size: 25px; font-weight: bold; text-align: center; margin-bottom: 40px">欢迎登录桂林理工大学图书馆</div>
          <el-form-item prop="username" style="height: 30px">
            <el-input placeholder="请输入账号" v-model="loginForm.username" class="username"style="font-size: 18px"></el-input>
          </el-form-item>
          <el-form-item prop="password" >
            <el-input show-password placeholder="请输入密码" v-model="loginForm.password" class="password"style="font-size: 18px"></el-input>
          </el-form-item>
          <el-form-item prop="role">
            <el-radio-group v-model="loginForm.role">
              <el-radio label="USER" >用户登录</el-radio>0
              <el-radio label="ADMIN">管理员登录</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item>
<!--            <el-button type="primary" style="width: 80%;height: 45px;margin-left: 50px" @click="handleLogin">登录</el-button>-->
            <el-button type="primary" style="width: 100%;height: 45px;font-size: 18px" @click="handleLogin">登录</el-button>
          </el-form-item>
          <div style="height: 30px;font-size: 18px">没有账号，请<span style="color: darkcyan;cursor: pointer"><router-link to="/enroll">注册</router-link></span></div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'; //引进axios


export default {
  name: 'Login',
  data() {
    return {
      loginForm: { // 修改：user 改为 loginForm
        username: '',
        password: '',
        role: ''
      },
      rules: { // 新增部分
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        role: [{required: true, message: '请选择角色', trigger: 'change'}]
      }
    };
  },
  methods: {
    async handleLogin() { // 修改方法名为 handleLogin

      try {
        await this.$refs.loginForm.validate(); // 新增验证表单
        const response = await axios.post('http://localhost:8080/users/login', this.loginForm);
        const {role, username, id} = response.data; // 获取返回数据中的 role, username 和 id
        localStorage.setItem('username', username); // 存储用户名
        localStorage.setItem('userId', id); // 存储用户 ID
        if (role === 'ADMIN') {
          window.location.href = 'http://localhost:5173/ADMIN/home';
        } else if (role === 'USER') {
          window.location.href = 'http://localhost:5173/user/home';
        }
      } catch (error) {
        console.error('Error logging in:', error);
        this.$message.error('登录失败，请检查用户名和密码');
      }
    }
  }
};
</script>

<style scoped>
/* 保持样式不变 */
.username{
  height: 40px;
}
.password{
  height: 40px;
}
</style>